import Cookie from "js-cookie"

export default {
    state:{
        // 控制菜单的展开还是收起
        isCollapse: false, // 显式初始化响应式属性
        tabsList: [
            {
                path: '/',
                name: 'home',
                label: '首页',
                Icon: 's-home',
                url: 'Home/Home'
            }
        ],// 面包屑数据
        menu: []
    },
    mutations:{
        // 修改菜单展开收起的方法
        collapseMenu(state){
            state.isCollapse = !state.isCollapse
        },
        // 更新面包屑数据
        selectMenu(state, val) {
            console.log(val)
            
            if(val.name !== 'home') {
                const index = state.tabsList.findIndex(item => item.name === val.name)
                // 如果不存在
                if (index === -1) {
                    // push方式把数据增加
                    state.tabsList.push(val)
                }
            }
        },
        // 删除指定的tag数据
        closeTag(state, item) {
            
            // 用数组删除方式进行删除
            const index = state.tabsList.findIndex(val => val.name === item.name)
            // splice参数
            // 第一个是要删除的位置
            // 第二个是要删除的个数
            state.tabsList.splice(index,1)
        },
        // 设置menu的数据
        setMenu(state, val) {
            state.menu = val
            //            JSON.stringify(val) 将对象序列化成字符串
            Cookie.set('menu', JSON.stringify(val))
        },
        // 动态注册路由
        addMenu(state, router) {
            // 判断缓存中是否有数据
            if (!Cookie.get('menu')) return
            const menu = JSON.parse(Cookie.get('menu'))
            state.menu = menu
            // 组装动态路由的数据
            const menuArray = []
            menu.forEach(item => {
                if (item.children) {
                    item.children = item.children.map(item => {
                        item.component= () => import(`../views/${item.url}`)
                        return item
                    })
                    // ...这个是扩展运算符把内容展开
                    menuArray.push(...item.children)
                }else {
                    item.component= () => import(`../views/${item.url}`)
                    menuArray.push(item)
                }
            })
            console.log(menuArray, 'menuArray')
            // 路由的动态添加
            menuArray.forEach(item => {
                // 动态添加路由
                router.addRoute('Main', item)
            })
        }
    }
}